<template>
  <div>
    <el-container>
      <el-header>
        <div style="width: 100%;display:flex;">
          <div class="title">课 堂 互 动 工 具</div>
          <el-image
              class="changeUser"
              @click="changeUser"
              :src="require('@/assets/back2.png')"
              :fit="fit">
          </el-image>
        </div>
      </el-header>
      <el-main>
        <div class="colorBlock_1" >
          <div class="module" @click="goSignIn">
            <el-image
                :src="require('@/assets/signIn.png')"
                :fit="fit">
            </el-image>
            <div class="text">
              课 堂 签 到
            </div>
          </div>

          <div class="module" onclick="window.location.href = '../vote'">
            <el-image
                :src="require('@/assets/vote.png')"
                :fit="fit">
            </el-image>
            <div class="text">
              投 票
            </div>

          </div>

          <div class="module" onclick="window.location.href = '../random-call'">
            <el-image
                :src="require('@/assets/randomCall.png')"
                :fit="fit">
            </el-image>
            <div class="text">
              随 机 点 名
            </div>

          </div>

        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Vue from 'vue'
import request from "@/utils/request";

export default {
  name: 'HomePage',
  data() {
    return {
      fit:'contain',
      loginId:'ChenGuanRu',//ChenGuanRu,lisi,laoliu
      user:true,

      // CORPID:'ww399ad41b83ce63d1',
      // REDIRECT_URI:'http%3a%2f%2aaa.bbb.com%3a8080%2f',
      // url:"https://open.weixin.qq.com/connect/oauth2/authorize?appid="+CORPID+'&redirect_uri='+REDIRECT_URI+'&response_type=code&scope=snsapi_base#wechat_redirect'
    }
  },
  methods:{
    changeUser(){//login
      // window.open('https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww399ad41b83ce63d1&redirect_uri=http%3a%2f%2aaa.bbb.com%3a8080%2f&response_type=code&scope=snsapi_base#wechat_redirect','_blank')

      // window.location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww399ad41b83ce63d1&redirect_uri=http%3a%2f%2aaa.bbb.com%3a8080%2f&response_type=code&scope=snsapi_base#wechat_redirect'

      // this.$router.push({
      //   path:'https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww399ad41b83ce63d1&redirect_uri=http%3a%2f%2aaa.bbb.com%3a8080%2f&response_type=code&scope=snsapi_base#wechat_redirect',
      // });



      this.user=!this.user;
      if(this.user){
        alert('当前为教师用户')
      }else {
        alert('当前为学生用户')
      }

    },
    goSignIn(){
      if(this.user){
        this.$router.push({
          name: 'SignIn',
          params: {
            loginId: this.loginId,
          }
        });
      }else{
        this.$router.push({
          name: 'SignInStaff',
          params: {
            loginId: this.loginId,
          }
        });
      }

    }
  },
  //登录信息存为全局变量
  created() {
    sessionStorage.setItem("loginId",this.loginId);
    // Vue.prototype.$loginId = this.loginId;
  }
}

</script>

<style scoped>

.el-header{
  background-color: #b3d1c5;
  color: rgba(23, 63, 45, 0.8);
  padding: 0;
}

.el-header:hover{
  cursor:default;
}

.el-main {
  background-color: rgba(240, 243, 241, 0.89);
  padding: 0;
}

body > .el-container {
  overflow: hidden;
  margin-bottom: 0;
}

.colorBlock_1{
  /*background-color: #e2e5e3;*/
  max-width: 500px;
  min-width: 300px;
  min-height: 600px;
  width: 60%;
  height: 70%;
  margin: auto;
  margin-top: 3%;
  margin-bottom: 27%;
  border-radius: 20px;
  /*box-shadow: 2px 2px 3px rgba(192, 197, 194, 0.60);*/
}

.module{
  width: 90%;
  height: 40%;
  display: flex;
  position: relative;
  max-width: 500px;
  min-width: 200px;
  min-height: 110px;
  margin: auto;
  margin-top: 5%;
  color: rgba(38,105,75,0.7);
  background-color: rgba(255,255,255,0.7);
  border-radius: 15px;
  font-size: 25px;
  box-shadow: 2px 2px 3px rgba(192, 197, 194, 0.60);
}

.module:hover{
  background-color: rgba(241, 238, 238, 0.4);
  box-shadow: 1px 1px 5px rgba(157, 162, 160, 0.7);
  cursor:pointer
}

.text{
  height: 60%;
  width: 50%;
  margin: auto;
  margin-right: 5%;
  position: relative;
  text-align: center;
  top: 15%;
}

.el-image {
  width: 90px;
  height: 90px;
  margin: auto;
  margin-left: 5%;
}

.title{
  line-height: 60px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  width: 100%;
  /*margin-left: 50px;*/
  /*margin-right: 50px;*/
}

.changeUser{
  position: absolute;
  height: 60px;
  width: 35px;
  /*height: 55%;*/
  right: 10px;
}

.changeUser:hover{
  cursor:pointer;
}

</style>
